<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表demo</title>
		<script src="jquery-3.6.0.min.js" ></script>
		<script>
					
					//让页面加载完成之后,再次调用
					//编程方式: 函数式编程
					$(function(){
						
						/**
						 * 常见Ajax写法:
						 * 	 1.$.ajax({})
						 *   2.$.get()   get类型
						 *   3.$.post()
						 * 	 4.$.getJSON()
						 */
						
						/**
						 * 语法说明:
						 * 	$.get(url,data,function(data){},dataType)
						 * 参数说明:
						 * 		1.url: 请求服务器的网址
						 * 		2.data: 前端向服务器传递的参数  字符串
						 * 		3.回调函数: 请求成功之后开始回调
						 * 		4.dataType: 返回值结果的数据类型. 可以省略自动判断
						 *	
						 */
						var url = "http://localhost:8090/getAll"
						/**
						 * 关于data语法: id=100  name="tom"
						 * 写法:
						 * 		1.JS对象的写法
						 * 		  {id:100,name:"tom"}
						 * 		2.字符串拼接
						 * 		  id=100&name=tom
						 */
						//var data = "id=100&name=tom"
						var data = {id:100,name:"tom"}
						$.get(url,data,function(data){
							for(user of data){
								//获取数据
								var tr=
								`<tr align="center">
								<td align="center">${user.id}</td>
								<td align="center">${user.name}</td>
								<td align="center">${user.age}</td>
								<td align="center">${user.sex}</td>
								</tr>`
								console.log(tr)
								$("#tab1").append(tr)
								
								}
							//of 关键字 直接获取遍历对象
							/*for(indrx in data){
								console.log(data[indrx])
							}*/
							
							/*for(var i=0;i<data.length;i++){
								console.log(data[i])
							}*/
						})
						
						
						
						
					})
					
				</script>
	</head>
	
	<body>
	
		<table id="tab1" border="1px" align="center"  width="80%">
			<tr><td colspan="4" align="center">
			<h1>用户列表</h1>
			</td></tr>
			<tr>
				<td align="center">编号</td>
				<td align="center">姓名</td>
				<td align="center">年龄</td>
				<td align="center">性别</td>
			</tr>
			<tr>
				<td align="center">100</td>
				<td align="center">黑熊精</td>
				<td align="center">3000</td>
				<td align="center">男</td>
			</tr>
			<!-- <tr>
				<td align="center">100</td>
				<td align="center">黑熊精</td>
				<td align="center">3000</td>
				<td align="center">男</td>
			</tr> -->
			
		</table>
	</body>
</html>
